<html>
    <head>
        <title>组件的复用</title>
    </head>
    <body>
        <script>
            // 二、组件的复用
                            // 你可以将组件进行任意次数的复用
                                /*
                                    <div id="components-demo">
                                        <button-counter></button-counter>
                                        <button-counter></button-counter>
                                        <button-counter></button-counter>
                                    </div>  
                                */

                             // ★、data 必须是一个函数
                                    /*
                                        当我们定义这个<button-counter>组件时，你可能会发现它的data并不像Vue根实例一样直接提供一个对象：
                                    */
                                    data:{
                                        count:0
                                    }

                                    /*  
                                        取而代之的是，"一个组件的data选项必须是一个函数"
                                        因此每个实例可以"维护一份"  "被返回对象的独立拷贝"：
                                    */
                                         // eg:
                                         data:function(){
                                          return{
                                            count:0
                                          }
                                         }

                                      // 如果Vue没有这条规则，操作组件实例就会影响到其他按钮组件的实例。
        </script>
    </body>
</html>